<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="test">
    <button @click="destroyVm">destroy vm</button>
    <p v-show="isShow">vue生命周期</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
        el:'#test',
        data:{
            isShow:'true'
        },
        //1.初始化阶段（执行1次）
        beforeCreate(){
            console.log('beforeCreate()')
        },

        created(){
            console.log('created()')
        },

        beforeMount(){
            console.log('beforeMount()')
        },



        mounted(){   //初始化显示后以及调用
            console.log('mounted()')
            this.intervalId = setInterval(() => {
                console.log('------')
                this.isShow = !this.isShow  //更新数据
            },1000)
        },

        //2.更新阶段（执行n次）
        beforeUpdate(){
            console.log('beforeUpdate()')
        },

        updated(){
            console.log('updated()')
        },

        //3.死亡阶段

        beforeDestroy(){ //死亡之前调用（1次）
            //清除定时器
            console.log('beforeDestroy()')
            clearInterval(this.intervalId)
        },


        destroyed(){
            console.log('destroyed()')
        },
        methods:{
            destroyVm(){
                //干掉VM
                this.$destroy()
            }
        }
    })


</script>
</body>
</html>